<template>
  <div class="top" id="topEcharts"></div>
</template>

<script>
export default {
  name: 'topEcharts',
  mounted() {
    this.topEcharts();
  },
  methods: {
    topEcharts() {
      let leftChart = this.$echarts.init(document.getElementById('topEcharts'));
      leftChart.setOption({
        // title: {
        //   text: '素质能力',
        //   left: 'center',
        //   top: 'bottom',
        //   textStyle: {
        //     fontSize: 14
        //   }
        // },
        dataset: {
          dimensions: ['product', '个人成绩', '班级平均'],
          source: [
            { product: '数据库熟练度', 个人成绩: 43.3, 班级平均: 85.8 },
            { product: 'JAVA熟练度', 个人成绩: 83.1, 班级平均: 73.4 },
            { product: '架构熟练度', 个人成绩: 86.4, 班级平均: 65.2 },
            { product: '素质能力', 个人成绩: 86.4, 班级平均: 65.2 },
            { product: '规范能力', 个人成绩: 88, 班级平均: 61 },
            { product: '完成度', 个人成绩: 92, 班级平均: 78 },
            { product: '执行能力', 个人成绩: 46, 班级平均: 56 },
            { product: '管理能力', 个人成绩: 67, 班级平均: 61 }
          ]
        },
        xAxis: {
          type: 'category',
          // data: ['6/1 周一', '6/2 周二', '6/3 周三', '6/4 周四', '6/5 周五', '6/6 周六', '6/7 周日'],
          axisLabel: {
            rotate: 45
          },
          name: '能力'
        },
        yAxis: {
          type: 'value',
          max: 100,
          name: '分值'
        },
        // series: [
        //   {
        //     data: [80, 50, 62, 79, 44, 50, 62],
        //     type: 'bar',
        //     // showBackground: true,
        //     backgroundStyle: {
        //       color: '#EBF9FC'
        //     },
        //     barWidth: 30,
        //     itemStyle: {
        //       normal: {
        //         color: function (params) {
        //           let colorList = ['#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088', '#59D088'];
        //           return colorList[params.dataIndex];
        //         }
        //       }
        //     }
        //   }
        // ],
        series: [
          {
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#EBF9FC'
            },
            barWidth: 5,
            itemStyle: {
              normal: {
                color: '#2FC0E0'
              }
            }
          },
          { type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#EBF9FC'
            },
            barWidth: 5,
            itemStyle: {
              normal: {
                color: '#8C5FDD'
              }
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#39C3E2'
            }
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.top {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
</style>
